<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link rel="stylesheet" href="css/mui.min.css" />
		<style type="text/css">
			.mui-card{margin-top: 10px;}
			#sliderSegmentedControl { background: #FED000 ; }
			#sliderSegmentedControl .mui-scroll { position: inherit; text-align: center; border: 1px #fff solid; border-radius: 5px; overflow: hidden; display: inline-block;height: 26px; margin: 8px 0 2px 0; overflow: hidden; }
			#sliderSegmentedControl .mui-scroll a { display: inline-block; float: left; padding:0 12px; line-height: 26px; color: #fff; font-size: 13px;}
			#sliderSegmentedControl .mui-scroll a.mui-active { background: #fff; color: #000; }
			#sliderSegmentedControl .mui-icon { position: absolute; right: 3px; top: 3px; font-size: 30px; border: 0; color: #fff;}
			/*list*/
			/*banner*/
			#banner .mui-slider-indicator { text-align: right; padding-right: 10px; bottom: 5px;}
			#banner .mui-slider-indicator .mui-indicator { border: 0;margin: 0 6px 0 0;width: 8px; height: 8px; background: #fff;}
			#banner .mui-slider-indicator .mui-active.mui-indicator { background: #FFC704; }
			#banner .mui-slider-item>a { top:0; -webkit-transform: translateY(0); transform: translateY(0); position: relative;}
			#banner .mui-slider-item h3 { position: absolute; bottom: 0; left: 0; width: 100%; padding: 30px 10px 0 10px; margin: 0;  line-height: 30px; font-size: 12px;  color: #fff; background:-webkit-gradient(linear, 0 0, 0 bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.4))); font-weight: normal;}
			.new_tit { text-align: center; background: #fff;}
			.new_tit a { color: #000; line-height: 34px; font-size: 13px; position: relative; border-bottom: 1px #eee solid;}
			.new_tit a:nth-of-type(n+1):after { content: ""; display: block; width: 1px; height: 16px; background: #eee; position: absolute; right: 0; top: 10px; overflow: hidden;  }
			.mui-slider .mui-slider-group .mui-slider-item .user_img { width: 36px; height: 36px; border-radius:100% ;}
			.mui-scroll .mui-card-header { overflow: hidden;}
			.mui-scroll .mui-card-header::after { content: normal;}
			.mui-card-footer:before, .mui-card-header:after { background-color: #eee;}
			.mui-scroll .mui-card-header .user_name { line-height: 36px; color: #333; font-size: 14px; padding-left: 5px; }
			.mui-scroll .mui-card-header i { display: inline-block; line-height: 20px; font-size: 12px; background: #ff0; font-style: normal; vertical-align: middle; border: 1px #DD524D solid; color: #DD524D; padding: 0 6px; border-radius: 4px; transform: scale(0.8); margin-left: -6px; position: relative; top: -1px; }
			.mui-scroll .mui-card-header button { float: right; font-size: 12px; padding: 3px 6px; position: relative; top: 7px; color: #f60; border: 1px #f60 solid; }
			.mui-scroll .mui-card-content .card-img { padding-left:10px ;}
			.mui-scroll .mui-card-content .card-img img { max-width: 60%; max-height: 150px;}
			.mui-scroll .mui-card-content .videoContainer { position: relative;}
			.mui-scroll .mui-card-content .videoContainer .video_bg { position: absolute; width: 100%; height: 80%; z-index: 1000; }
			.mui-scroll .mui-card-content .jh_icon { font-style: normal; display: inline-block; background: #f0ad4e; color: #fff; vertical-align: middle; padding: 0 5px; font-size: 12px; line-height: 18px; position: relative; top: -3px; margin-right: 5px; }
			.mui-scroll .mui-card-content .top_icon { font-style: normal; display: inline-block; background: #f00; color: #fff; vertical-align: middle; padding: 0 5px; font-size: 12px; line-height: 18px; position: relative; top: -3px; margin-right: 5px; }
			.mui-scroll .mui-card-content video { width: 1px; height: 1px; position: absolute; top: -4px; left: -1000px; }
			.mui-scroll .mui-card-content img { width: 100%;}
			.mui-scroll .mui-card-content .video_play { margin: 3px; width: 50px; height: 50px; display: inline-block; text-align: center; background-color: #fff; border: 1px solid #fff; border-radius: 25px; background-clip: padding-box; color: #000; opacity: 0.9; position: absolute; top: 40%; left: 50%; margin-left: -25px;}
			.mui-scroll .mui-card-content .video_play .mui-icon { margin-top: 12px;}
			.mui-scroll .mui-card-content p { display: block; padding: 0 10px 10px 10px; font-size: 13px; line-height: 18px; margin: 0 !important;zoom: 1;}
			.mui-scroll .mui-card-content p:before,.mui-scroll .mui-card-content p:after { content: ""; display: block;  clear: both; }
			.mui-scroll .mui-card-footer .mui-card-link{ font-size: 13px; color: #999; border-left: 1px #eee solid; width: 30%; text-align: center; display: inline-block;}
			.mui-scroll .mui-card-footer .mui-card-link:first-child { border: 0;}
			.mui-scroll .mui-card-footer .mui-icon { font-size: 16px; margin-right: 3px;}
			.mui-table-view { background: none;}
			
			.mui-bar~.mui-content .mui-fullscreen {top:44px;height:auto;}
			.mui-pull-top-tips {position:absolute;top:-20px;left:50%;margin-left:-25px;width:40px;height:40px;border-radius:100%; z-index: 100;}
			.mui-bar~.mui-pull-top-tips {top:24px;}
			.mui-pull-top-wrapper {width:42px;height:42px;display:block;text-align:center;background-color:#efeff4;border:1px solid #ddd;border-radius:25px;background-clip:padding-box;box-shadow:0 4px 10px #bbb;overflow:hidden;}
			.mui-pull-top-tips.mui-transitioning {-webkit-transition-duration:200ms;transition-duration:200ms;}
			.mui-pull-top-tips .mui-pull-loading {-webkit-backface-visibility:hidden;-webkit-transition-duration:400ms;transition-duration:400ms;margin:0;}
			.mui-pull-top-wrapper .mui-icon,.mui-pull-top-wrapper .mui-spinner {margin-top:7px;}
			.mui-pull-top-wrapper .mui-icon.mui-reverse {-webkit-transform:rotate(180deg) translateZ(0);}
			.mui-pull-bottom-tips {text-align:center;background-color:#efeff4;font-size:15px;line-height:40px;color:#777;}
			.mui-pull-top-canvas {overflow:hidden;background-color:#fafafa;border-radius:40px;box-shadow:0 4px 10px #bbb;width:40px;height:40px;margin:0 auto;}
			.mui-pull-top-canvas canvas {width:40px;}
			.mui-slider-indicator.mui-segmented-control {background-color:#efeff4;}
		</style>
	</head>

	<body>
		<div class="mui-content">
			<div id="slider" class="mui-slider mui-fullscreen">
				<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<div class="mui-scroll">
						<a class="mui-control-item mui-active" href="#item1mobile">热门</a>
						<a class="mui-control-item" href="#item2mobile">关注</a>
						<a class="mui-control-item" href="#item3mobile">视频</a>
						<a class="mui-control-item" href="#item4mobile">最新</a>
					</div>
					<a id="i_camera" class="mui-icon mui-icon-camera"></a>
				</div>
				
				<div class="mui-slider-group">
					<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
						<div id="scroll1" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<!--轮播-->
								<div id="banner" class="mui-slider mui-slider-self">
									<div class="mui-slider-group mui-slider-loop">
										<!--支持循环，需要重复图片节点-->
									    <div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="img/banner2.jpg" /><h3>犯得上犯得上大师傅大师傅</h3></a></div>
									    <div class="mui-slider-item"><a href="#"><img src="img/banner1.jpg" /><h3>犯得上犯得上大师傅大师傅</h3></a></div>
									    <div class="mui-slider-item"><a href="#"><img src="img/banner2.jpg" /><h3>犯得上犯得上大师傅大师傅</h3></a></div>
									    <!--支持循环，需要重复图片节点-->
									    <div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="img/banner1.jpg" /><h3>犯得上犯得上大师傅大师傅</h3></a></div>
									</div>
									<div class="mui-slider-indicator">
										<div class="mui-indicator mui-active"></div>
										<div class="mui-indicator"></div>
									</div>
								</div>
								<!--轮播-->
								<div class="mui-row new_tit">
									<a class="mui-col-sm-6">#的范德萨发第三方#</a>
									<a class="mui-col-sm-6">#的范德萨发第三方#</a>
									<a class="mui-col-sm-6">#的范德萨发第三方#</a>
									<a class="mui-col-sm-6">#的范德萨发第三方#</a>
								</div>
								<div id="test_video">
									
								</div>
								<ul class="mui-table-view">
									<!--list-->
									<li class="mui-card">
										<div class="mui-card-header mui-card-media">
											<img class="user_img" src="img/114x114.png">
											<span class="user_name">大黄广场舞</span>
											<i>LV10无敌舞王</i>
											<button type="button" class="mui-btn mui-btn-outlined">+ 关注</button>
										</div>
										<div class="mui-card-content">
											<p><i class="top_icon">置顶</i><i class="jh_icon">精华</i>我刚发布了一个视频《佛挡杀佛对方答复》范德萨范德萨范德萨发的发第三方，快来看看吧</p>
											<div class="card-img">
												<img src="imgs/app-logo.png.jpg"/>
											</div>
											
										</div>
										<div class="mui-card-footer">
											<a class="mui-card-link"><span class="mui-icon mui-icon-chatboxes"></span>8</a>
											<a class="mui-card-link"><span class="mui-icon mui-icon-chatboxes"></span>24</a>
											<a class="mui-card-link"><span class="mui-icon mui-icon-chatboxes"></span>分享</a>
										</div>
									</li>
									<li class="mui-card">
										<div class="mui-card-header mui-card-media">
											<img class="user_img" src="img/114x114.png">
											<span class="user_name">大黄广场舞</span>
											<i>LV10无敌舞王</i>
											<button type="button" class="mui-btn mui-btn-outlined">+ 关注</button>
										</div>
										<div class="mui-card-content">
											<p><i class="jh_icon">精华</i>我刚发布了一个视频《佛挡杀佛对方答复》范德萨范德萨范德萨发的发第三方，快来看看吧</p>
											<div class="videoContainer">
												<div class="video_bg"></div>
												<video webkit-playsinline class="videoMedia" id="test_video" controls="controls" preload>
													<source src="img/video.mp4" type="video/mp4"></source>
												</video>
												<img src="img/pic2.jpg"/>
												<a class="video_play"><span class="mui-icon mui-icon-forward"></span></a>
											</div>
											
										</div>
										<div class="mui-card-footer">
											<a class="mui-card-link"><span class="mui-icon mui-icon-chatboxes"></span>8</a>
											<a class="mui-card-link"><span class="mui-icon mui-icon-chatboxes"></span>24</a>
											<a class="mui-card-link"><span class="mui-icon mui-icon-chatboxes"></span>分享</a>
										</div>
									</li>
									<!--list end-->
								</ul>
							</div>
						</div>
					</div>
					<div id="item2mobile" class="mui-slider-item mui-control-content">
						<div class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<!--轮播-->
								<div id="banner" class="mui-slider mui-slider-self">
									<div class="mui-slider-group mui-slider-loop">
										<!--支持循环，需要重复图片节点-->
									    <div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="img/banner2.jpg" /><h3>犯得上犯得上大师傅大师傅</h3></a></div>
									    <div class="mui-slider-item"><a href="#"><img src="img/banner1.jpg" /><h3>犯得上犯得上大师傅大师傅</h3></a></div>
									    <div class="mui-slider-item"><a href="#"><img src="img/banner2.jpg" /><h3>犯得上犯得上大师傅大师傅</h3></a></div>
									    <!--支持循环，需要重复图片节点-->
									    <div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="img/banner1.jpg" /><h3>犯得上犯得上大师傅大师傅</h3></a></div>
									</div>
									<div class="mui-slider-indicator">
										<div class="mui-indicator mui-active"></div>
										<div class="mui-indicator"></div>
									</div>
								</div>
								<!--轮播-->
								<div class="mui-row new_tit">
									<a class="mui-col-sm-6">#的范德萨发第三方#</a>
									<a class="mui-col-sm-6">#的范德萨发第三方#</a>
									<a class="mui-col-sm-6">#的范德萨发第三方#</a>
									<a class="mui-col-sm-6">#的范德萨发第三方#</a>
								</div>
								<ul class="mui-table-view">
									<!--list-->
									<li class="mui-card">
										<div class="mui-card-header mui-card-media">
											<img class="user_img" src="img/114x114.png">
											<span class="user_name">大黄广场舞</span>
											<i>LV10无敌舞王</i>
											<button type="button" class="mui-btn mui-btn-outlined">+ 关注</button>
										</div>
										<div class="mui-card-content">
											<p><i class="top_icon">置顶</i><i class="jh_icon">精华</i>我刚发布了一个视频《佛挡杀佛对方答复》范德萨范德萨范德萨发的发第三方，快来看看吧</p>
											<div class="card-img">
												<img src="imgs/app-logo.png.jpg"/>
											</div>
											
										</div>
										<div class="mui-card-footer">
											<a class="mui-card-link"><span class="mui-icon mui-icon-chatboxes"></span>8</a>
											<a class="mui-card-link"><span class="mui-icon mui-icon-chatboxes"></span>24</a>
											<a class="mui-card-link"><span class="mui-icon mui-icon-chatboxes"></span>分享</a>
										</div>
									</li>
									<li class="mui-card">
										<div class="mui-card-header mui-card-media">
											<img class="user_img" src="img/114x114.png">
											<span class="user_name">大黄广场舞</span>
											<i>LV10无敌舞王</i>
											<button type="button" class="mui-btn mui-btn-outlined">+ 关注</button>
										</div>
										<div class="mui-card-content">
											<p><i class="jh_icon">精华</i>我刚发布了一个视频《佛挡杀佛对方答复》范德萨范德萨范德萨发的发第三方，快来看看吧</p>
											<div class="videoContainer">
												<div class="video_bg"></div>
												<video webkit-playsinline class="videoMedia" controls="controls" preload>
													<source src="img/video.mp4" type="video/mp4"></source>
												</video>
												<img src="img/pic2.jpg"/>
												<a class="video_play"><span class="mui-icon mui-icon-forward"></span></a>
											</div>
											
										</div>
										<div class="mui-card-footer">
											<a class="mui-card-link"><span class="mui-icon mui-icon-chatboxes"></span>8</a>
											<a class="mui-card-link"><span class="mui-icon mui-icon-chatboxes"></span>24</a>
											<a class="mui-card-link"><span class="mui-icon mui-icon-chatboxes"></span>分享</a>
										</div>
									</li>
									<!--list end-->
								</ul>
							</div>
						</div>
					</div>
					<div id="item3mobile" class="mui-slider-item mui-control-content">
						<div class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<!--轮播-->
								<div id="banner" class="mui-slider mui-slider-self">
									<div class="mui-slider-group mui-slider-loop">
										<!--支持循环，需要重复图片节点-->
									    <div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="img/banner2.jpg" /><h3>犯得上犯得上大师傅大师傅</h3></a></div>
									    <div class="mui-slider-item"><a href="#"><img src="img/banner1.jpg" /><h3>犯得上犯得上大师傅大师傅</h3></a></div>
									    <div class="mui-slider-item"><a href="#"><img src="img/banner2.jpg" /><h3>犯得上犯得上大师傅大师傅</h3></a></div>
									    <!--支持循环，需要重复图片节点-->
									    <div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="img/banner1.jpg" /><h3>犯得上犯得上大师傅大师傅</h3></a></div>
									</div>
									<div class="mui-slider-indicator">
										<div class="mui-indicator mui-active"></div>
										<div class="mui-indicator"></div>
									</div>
								</div>
								<!--轮播-->
								<div class="mui-row new_tit">
									<a class="mui-col-sm-6">#的范德萨发第三方#</a>
									<a class="mui-col-sm-6">#的范德萨发第三方#</a>
									<a class="mui-col-sm-6">#的范德萨发第三方#</a>
									<a class="mui-col-sm-6">#的范德萨发第三方#</a>
								</div>
								<ul class="mui-table-view">
									<!--list-->
									<li class="mui-card">
										<div class="mui-card-header mui-card-media">
											<img class="user_img" src="img/114x114.png">
											<span class="user_name">大黄广场舞</span>
											<i>LV10无敌舞王</i>
											<button type="button" class="mui-btn mui-btn-outlined">+ 关注</button>
										</div>
										<div class="mui-card-content">
											<p><i class="top_icon">置顶</i><i class="jh_icon">精华</i>我刚发布了一个视频《佛挡杀佛对方答复》范德萨范德萨范德萨发的发第三方，快来看看吧</p>
											<div class="card-img">
												<img src="imgs/app-logo.png.jpg"/>
											</div>
											
										</div>
										<div class="mui-card-footer">
											<a class="mui-card-link"><span class="mui-icon mui-icon-chatboxes"></span>8</a>
											<a class="mui-card-link"><span class="mui-icon mui-icon-chatboxes"></span>24</a>
											<a class="mui-card-link"><span class="mui-icon mui-icon-chatboxes"></span>分享</a>
										</div>
									</li>
									<li class="mui-card">
										<div class="mui-card-header mui-card-media">
											<img class="user_img" src="img/114x114.png">
											<span class="user_name">大黄广场舞</span>
											<i>LV10无敌舞王</i>
											<button type="button" class="mui-btn mui-btn-outlined">+ 关注</button>
										</div>
										<div class="mui-card-content">
											<p><i class="jh_icon">精华</i>我刚发布了一个视频《佛挡杀佛对方答复》范德萨范德萨范德萨发的发第三方，快来看看吧</p>
											<div class="videoContainer">
												<div class="video_bg"></div>
												<video webkit-playsinline class="videoMedia" controls="controls" preload>
													<source src="img/video.mp4" type="video/mp4"></source>
												</video>
												<img src="img/pic2.jpg"/>
												<a class="video_play"><span class="mui-icon mui-icon-forward"></span></a>
											</div>
											
										</div>
										<div class="mui-card-footer">
											<a class="mui-card-link"><span class="mui-icon mui-icon-chatboxes"></span>8</a>
											<a class="mui-card-link"><span class="mui-icon mui-icon-chatboxes"></span>24</a>
											<a class="mui-card-link"><span class="mui-icon mui-icon-chatboxes"></span>分享</a>
										</div>
									</li>
									<!--list end-->
								</ul>
							</div>
						</div>
					</div>
					<div id="item4mobile" class="mui-slider-item mui-control-content">
						<div class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<!--轮播-->
								<div id="banner" class="mui-slider mui-slider-self">
									<div class="mui-slider-group mui-slider-loop">
										<!--支持循环，需要重复图片节点-->
									    <div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="img/banner2.jpg" /><h3>犯得上犯得上大师傅大师傅</h3></a></div>
									    <div class="mui-slider-item"><a href="#"><img src="img/banner1.jpg" /><h3>犯得上犯得上大师傅大师傅</h3></a></div>
									    <div class="mui-slider-item"><a href="#"><img src="img/banner2.jpg" /><h3>犯得上犯得上大师傅大师傅</h3></a></div>
									    <!--支持循环，需要重复图片节点-->
									    <div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="img/banner1.jpg" /><h3>犯得上犯得上大师傅大师傅</h3></a></div>
									</div>
									<div class="mui-slider-indicator">
										<div class="mui-indicator mui-active"></div>
										<div class="mui-indicator"></div>
									</div>
								</div>
								<!--轮播-->
								<div class="mui-row new_tit">
									<a class="mui-col-sm-6">#的范德萨发第三方#</a>
									<a class="mui-col-sm-6">#的范德萨发第三方#</a>
									<a class="mui-col-sm-6">#的范德萨发第三方#</a>
									<a class="mui-col-sm-6">#的范德萨发第三方#</a>
								</div>
								<ul class="mui-table-view">
									<!--list-->
									<li class="mui-card">
										<div class="mui-card-header mui-card-media">
											<img class="user_img" src="img/114x114.png">
											<span class="user_name">大黄广场舞</span>
											<i>LV10无敌舞王</i>
											<button type="button" class="mui-btn mui-btn-outlined">+ 关注</button>
										</div>
										<div class="mui-card-content">
											<p><i class="top_icon">置顶</i><i class="jh_icon">精华</i>我刚发布了一个视频《佛挡杀佛对方答复》范德萨范德萨范德萨发的发第三方，快来看看吧</p>
											<div class="card-img">
												<img src="imgs/app-logo.png.jpg"/>
											</div>
											
										</div>
										<div class="mui-card-footer">
											<a class="mui-card-link"><span class="mui-icon mui-icon-chatboxes"></span>8</a>
											<a class="mui-card-link"><span class="mui-icon mui-icon-chatboxes"></span>24</a>
											<a class="mui-card-link"><span class="mui-icon mui-icon-chatboxes"></span>分享</a>
										</div>
									</li>
									<li class="mui-card">
										<div class="mui-card-header mui-card-media">
											<img class="user_img" src="img/114x114.png">
											<span class="user_name">大黄广场舞</span>
											<i>LV10无敌舞王</i>
											<button type="button" class="mui-btn mui-btn-outlined">+ 关注</button>
										</div>
										<div class="mui-card-content">
											<p><i class="jh_icon">精华</i>我刚发布了一个视频《佛挡杀佛对方答复》范德萨范德萨范德萨发的发第三方，快来看看吧</p>
											<div class="videoContainer">
												<div class="video_bg"></div>
												<video webkit-playsinline class="videoMedia" controls="controls" preload>
													<source src="img/video.mp4" type="video/mp4"></source>
												</video>
												<img src="img/pic2.jpg"/>
												<a class="video_play"><span class="mui-icon mui-icon-forward"></span></a>
											</div>
											
										</div>
										<div class="mui-card-footer">
											<a class="mui-card-link"><span class="mui-icon mui-icon-chatboxes"></span>8</a>
											<a class="mui-card-link"><span class="mui-icon mui-icon-chatboxes"></span>24</a>
											<a class="mui-card-link"><span class="mui-icon mui-icon-chatboxes"></span>分享</a>
										</div>
									</li>
									<!--list end-->
								</ul>
							</div>
						</div>
					</div>
				 </div>
			</div>
		</div>
		<script src="js/mui.min.js"></script>
		<script src="js/mui.pullToRefresh.js"></script>
		<script src="js/mui.pullToRefresh.material.js"></script>
		<script type="text/javascript" src="js/zepto.min.js"></script>
		<script type="text/javascript" charset="utf-8">
			mui.init({
				swipeBack:false
			});
			(function($) {
				//阻尼系数
				var deceleration = mui.os.ios?0.003:0.0009;
				$('.mui-scroll-wrapper').scroll({
					bounce: false,
					indicators: true, //是否显示滚动条
					deceleration:deceleration
				});
				$.ready(function() {
					//循环初始化所有下拉刷新，上拉加载。
					$.each(document.querySelectorAll('.mui-slider-group .mui-scroll'), function(index, pullRefreshEl) {
						$(pullRefreshEl).pullToRefresh({
							down: {
								callback: function() {
									var self = this;
									setTimeout(function() {
										var ul = self.element.querySelector('.mui-table-view');
										ul.insertBefore(createFragment(ul, index, 10, true), ul.firstChild);
										self.endPullDownToRefresh();
									}, 1000);
								}
							},
							up: {
								callback: function() {
									var self = this;
									setTimeout(function() {
										var ul = self.element.querySelector('.mui-table-view');
										ul.appendChild(createFragment(ul, index, 5));
										self.endPullUpToRefresh();
									}, 1000);
								}
							}
						});
					});
					var createFragment = function(ul, index, count, reverse) {
						var length = ul.querySelectorAll('li').length;
						var fragment = document.createDocumentFragment();
						var li;
						for (var i = 0; i < count; i++) {
							li = document.createElement('li');
							li.className = 'mui-card';
							li.innerHTML = '<div class="mui-card-header mui-card-media">\
											<img class="user_img" src="img/114x114.png">\
											<span class="user_name">大黄广场舞</span>\
											<i>LV10无敌舞王</i>\
											<button type="button" class="mui-btn mui-btn-outlined">+ 关注</button>\
										</div>\
										<div class="mui-card-content">\
											<p><i class="jh_icon">精华</i>我刚发布了一个视频《佛挡杀佛对方答复》范德萨范德萨范德萨发的发第三方，快来看看吧</p>\
											<div class="videoContainer">\
												<div class="video_bg"></div>\
												<video webkit-playsinline class="videoMedia" controls="controls" preload>\
													<source src="img/video.mp4" type="video/mp4"></source>\
												</video>\
												<img src="img/pic2.jpg"/>\
												<a class="video_play"><span class="mui-icon mui-icon-forward"></span></a>\
											</div>\
										</div>\
										<div class="mui-card-footer">\
											<a class="mui-card-link"><span class="mui-icon mui-icon-chatboxes"></span>8</a>\
											<a class="mui-card-link"><span class="mui-icon mui-icon-chatboxes"></span>24</a>\
											<a class="mui-card-link"><span class="mui-icon mui-icon-chatboxes"></span>分享</a>\
										</div>';
							fragment.appendChild(li);
						}
						return fragment;
					};
				});
			})(mui);
			//拍照 
	        function getImage() { 
	            var c = plus.camera.getCamera(); 
	            c.captureImage(function(e) { 
	                plus.io.resolveLocalFileSystemURL(e, function(entry) { 
	                    var s = entry.toLocalURL() + "?version=" + new Date().getTime(); 
	                    uploadHead(s); /*上传图片*/ 
	                }, function(e) { 
	                    console.log("读取拍照文件错误：" + e.message); 
	                }); 
	            }, function(s) { 
	                console.log("error" + s); 
	            }, { 
	                filename: "_doc/head.png" 
	            }) 
	        } 
	        //录视频
	        function getVideo(){
	        	var cmr = plus.camera.getCamera();
                //获取相机
                cmr.startVideoCapture(function(p) {
                //录像
                plus.io.resolveLocalFileSystemURL(p, function(entry) {
                //通过URL参数获取目录对象或文件对象 就是获取到录像文件位置    
                        console.log(p);//打印文件位置，可以直接用作上传路径
                        mui.toast('视频录制上传成功'+p,{ duration:'long', type:'div' });
//                      $("#test_video").after('<video webkit-playsinline class="videoMedia" controls="controls" preload><source src="'+p+'" type="video/mp4"></source></video>');
                    }, function(e) {
                        console.log("读取录像文件错误：" + e.message);
                    });

                }, function(e) {
                    console.log("失败");
                    plus.nativeUI.toast("录像失败！",{duration:"long"});
                }, {
                    filename: "_doc/camera/",//文件保存目录
                    index: 2
                });
	        }
	        //本地相册选择 
	        function galleryImg() { 
	            plus.gallery.pick(function(a) { 
	                plus.io.resolveLocalFileSystemURL(a, function(entry) { 
	                    plus.io.resolveLocalFileSystemURL("_doc/", function(root) { 
	                        root.getFile("head.png", {}, function(file) { 
	                            //文件已存在 
	                            file.remove(function() { 
	                                console.log("file remove success"); 
	                                entry.copyTo(root, 'head.png', function(e) { 
	                                        var e = e.fullPath + "?version=" + new Date().getTime(); 
	                                        createUpload(e,"www.xxxx.com","img");
//	                                        uploadHead(e); /*上传图片*/ 
	                                        //变更大图预览的src 
	                                        //目前仅有一张图片，暂时如此处理，后续需要通过标准组件实现 
	                                    }, 
	                                    function(e) { 
	                                        console.log('copy image fail:' + e.message); 
	                                    }); 
	                            }, function() { 
	                                console.log("delete image fail:" + e.message); 
	                            }); 
	                        }, function() { 
	                            //文件不存在 
	                            entry.copyTo(root, 'head.png', function(e) { 
	                                    var path = e.fullPath + "?version=" + new Date().getTime(); 
	                                    uploadHead(path); /*上传图片*/ 
	                                }, 
	                                function(e) { 
	                                    console.log('copy image fail:' + e.message); 
	                                }); 
	                        }); 
	                    }, function(e) { 
	                        console.log("get _www folder fail"); 
	                    }) 
	                }, function(e) { 
	                    console.log("读取拍照文件错误：" + e.message); 
	                }); 
	            }, function(a) {}, { 
	                filter: "image" 
	            }) 
	        }; 
	        //本地视频选择 
	        function galleryVideo() { 
	            plus.gallery.pick(function(path) { 
	                console.log(path);
	                mui.toast('视频选择成功'+path,{ duration:'long', type:'div' });
	                createUpload(path,"www.xxxx.com","video");
	            }, function(a) {}, { 
	                filter: "video" 
	            }) 
	        }; 
	        //上传头像图片 
	        function uploadHead(imgPath) { 
	            console.log("imgPath = " + imgPath); 
//	            var mainImage = $("#banner img")[2];
//	            mainImage.src = imgPath; 
	 			
	            var image = new Image(); 
	            image.src = imgPath; 
	            image.onload = function() { 
	                var imgData = getBase64Image(image);
	                /*在这里调用上传接口*/ 
	//              mui.ajax("图片上传接口", { 
	//                  data: { 
	//                       
	//                  }, 
	//                  dataType: 'json', 
	//                  type: 'post', 
	//                  timeout: 10000, 
	//                  success: function(data) { 
	//                      console.log('上传成功'); 
	//                  }, 
	//                  error: function(xhr, type, errorThrown) { 
	//                      mui.toast('网络异常，请稍后再试！'); 
	//                  } 
	//              }); 
	            } 
	    	} 
	        //将图片压缩转成base64 
	        function getBase64Image(img) { 
	            var canvas = document.createElement("canvas"); 
	            var width = img.width; 
	            var height = img.height; 
	            // calculate the width and height, constraining the proportions 
	            if (width > height) { 
	                if (width > 100) { 
	                    height = Math.round(height *= 100 / width); 
	                    width = 100; 
	                } 
	            } else { 
	                if (height > 100) { 
	                    width = Math.round(width *= 100 / height); 
	                    height = 100; 
	                } 
	            } 
	            canvas.width = width;   /*设置新的图片的宽度*/ 
	            canvas.height = height; /*设置新的图片的长度*/ 
	            var ctx = canvas.getContext("2d"); 
	            ctx.drawImage(img, 0, 0, width, height); /*绘图*/ 
	            var dataURL = canvas.toDataURL("image/png", 0.8); 
	            return dataURL.replace("data:image/png;base64,", ""); 
	        }
	        // 监听上传任务状态
			function onStateChanged( upload, status ) {
				if ( upload.state == 4 && status == 200 ) {
					// 上传完成
					alert( "Upload success: " + upload.getFileName() );
				}
			}
			// 创建上传任务
			function createUpload(data,url,key) {
				var task = plus.uploader.createUpload(url);
				task.addFile( data, {key:key} );
				task.addData( "string_key", "string_value" );
				task.addEventListener( "statechanged", onStateChanged, false );
				task.start();
			}
			// 暂停上传任务
			function pauseUpload() {
				task.pause();
			}
			// 取消上传任务
			function abortUpload() {
				task.abort();
			}
			mui.plusReady(function() {
				var gallery = mui('#banner');
					gallery.slider({
					  interval:5000//自动轮播周期，若为0则不自动播放，默认为0；
					});
//				mui.ajax('http://k5.wuhubgy.cn/api/index/topad', {
//					dataType: 'json', //服务器返回json格式数据
//					type: 'post', //HTTP请求类型
//					success: function(data) {
//						console.log(data);
//						var items = data.data;
//						var point = "";
//						var html = '<div class="mui-slider-item"><a href="' + items[items.length-1].url + '" title="' + items[items.length-1].name + '"><img src="' + items[items.length-1].pic + '"></a></div>';
//						for(var i = 0; i < items.length; i++) {
//							html += '<div class="mui-slider-item"><a href="' + items[i].url + '" title="' + items[i].name + '"><img src="' + items[i].pic + '"></a></div>';
//							if(i == 0) {
//								point += '<div class="mui-indicator mui-active"></div>'
//							} else {
//								point += '<div class="mui-indicator"></div>'
//							}
//						}
//						html += '<div class="mui-slider-item  mui-slider-item-duplicate"><a href="' + items[0].url + '" title="' + items[0].name + '"><img src="' + items[0].pic + '"></a></div>'
//						$('.mui-slider-group').html(html);
//						$('.mui-slider-indicator').html(point);
//						var slider = mui("#slider");
//						slider.slider({
//							interval: 5000
//						});
//					}
//			
//				});
	 			document.getElementById('i_camera').addEventListener('tap', function() { 
		            if (mui.os.plus) { 
		                var a = [{ 
		                    title: "拍照" 
		                }, { 
		                    title: "从手机相册选择" 
		                }, { 
		                    title: "录制视频" 
		                }, { 
		                    title: "本地视频选择" 
		                }]; 
		                plus.nativeUI.actionSheet({ 
		                    title: "上传图片视频", 
		                    cancel: "取消", 
		                    buttons: a 
		                }, function(b) { /*actionSheet 按钮点击事件*/ 
		                    switch (b.index) { 
		                        case 0: 
		                            break; 
		                        case 1: 
		                            getImage(); /*拍照*/ 
		                            break; 
		                        case 2: 
		                            galleryImg();/*上传图片*/ 
		                            break; 
	                            case 3: 
		                            getVideo();/*录制视频*/ 
		                            break;
	                            case 4: 
		                            galleryVideo();/*上传视频*/ 
		                            break; 
		                        
		                        default: 
		                            break; 
		                    } 
		                }) 
		            } 
		        }, false); 
				//点击图片播放
				mui(".mui-control-content").on('tap','.videoContainer',function(){ 
					var $this = $(this);
					//是否采用内联播放模式
					var videoMedia = $this.find(".videoMedia");
					//获取视频应该得宽和高
					var videoWidth = videoMedia.parent().attr('offsetWidth');
					var videoHeight = videoMedia.parent().attr('offsetHeight');
					$this.css({'width':videoWidth,'height':videoHeight});
					if (videoMedia[0].paused || videoMedia[0].ended) {
						//暂停时播放
						if (videoMedia[0].ended) {
							videoMedia[0].currentTime = 0;
						}
						$(".videoMedia").each(function(index){
							$(".videoMedia")[index].pause();
						});
						$this.find('img').hide();
						$this.find('.video_play').hide();
						videoMedia.css({'width':videoWidth,'height':videoHeight,"left":"0"});
						videoMedia[0].play();
					} else {
						//播放时暂停
						$(".videoMedia").each(function(index){
							$(".videoMedia")[index].pause();
						});
					}
				});
				//点击图片播放
//				mui(".mui-control-content").on('tap','.full_paly',function(){
//					var mediaTarget = $(this).siblings("video");
//					var url = mediaTarget[0].getElementsByTagName('source')[0].src;
//					if (window.plus && plus.os.name == 'Android') {
//				//非内联模式下的plus下的android才用到
//						var Intent = plus.android.importClass("android.content.Intent");
//						var Uri = plus.android.importClass("android.net.Uri");
//						var main = plus.android.runtimeMainActivity();
//						var intent = new Intent(Intent.ACTION_VIEW);
//						var uri = Uri.parse(url);
//						intent.setDataAndType(uri, "video/*");
//						main.startActivity(intent);
//					} else {
//						//如果是非内敛,ios需要去除内联样式
//						mediaTarget.removeAttr('webkit-playsinline');
//					}
//				});
			});
		</script>
	</body>

</html>